<template>
  <div class="mainWrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-caiwu fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>财务及数据</el-breadcrumb-item>
      <el-breadcrumb-item>商户支付查询</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content_Box box-shadow">
      <div class="py_5 px_10">
        <el-row>
          <el-col :span="4">
            <el-button type="default" @click="downloadOrder()" round size="mini"
              >导出</el-button
            >
          </el-col>
          <el-col :span="20">
            <el-form
              :inline="true"
              :model="ruleForm"
              class="form-inline fr"
              @keyup.enter.native="shearchBtn()"
            >
              <el-form-item>
                <el-input
                  size="mini"
                  class="w_130"
                  v-model="s_jlbh"
                  placeholder="记录编号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  size="mini"
                  class="w_150"
                  v-model="s_zfddh"
                  placeholder="支付订单号"
                ></el-input>
              </el-form-item>
              <lh-agent-list
                @sendValue="setValue"
                :reset="agent_reset"
              ></lh-agent-list>
              <el-form-item>
                <el-select
                  class="w_110"
                  v-model="city_val"
                  placeholder="请选择城市"
                  @change="changeCity"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="`${item.id}|${item.name}`"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="s_area_arr"
                  multiple
                  collapse-tags
                  placeholder="商圈"
                >
                  <el-button
                    size="mini"
                    type="primary"
                    class="round-right all-area"
                    @click="selectAllArea()"
                    native-type="button"
                    >{{ areaStatus ? '全选' : '取消全选' }}</el-button
                  >
                  <el-option
                    v-for="item in areaList"
                    :key="item.id"
                    :label="item.area_name"
                    :value="`${item.id}|${item.area_name}`"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-autocomplete
                  size="mini"
                  class="w_190"
                  v-model="shop_name"
                  :fetch-suggestions="querySearch"
                  placeholder="店铺名称"
                  :trigger-on-focus="true"
                  @select="handleSelect"
                  clearable
                ></el-autocomplete>
              </el-form-item>

              <el-form-item>
                <el-select
                  size="mini"
                  class="w_100"
                  v-model="s_pay_status"
                  placeholder="支付状态"
                  clearable
                >
                  <el-option label="待支付" value="1"></el-option>
                  <el-option label="支付中" value="2"></el-option>
                  <el-option label="支付成功" value="3"></el-option>
                  <el-option label="支付失败" value="4"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="datetime1">
                <el-date-picker
                  size="mini"
                  class="w_160i"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  placeholder="创建开始时间"
                  v-model="ruleForm.date1"
                ></el-date-picker> </el-form-item
              >~
              <el-form-item prop="datetime2">
                <el-date-picker
                  size="mini"
                  class="w_160i"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  placeholder="创建结束时间"
                  v-model="ruleForm.date2"
                ></el-date-picker>
              </el-form-item>
              <el-button
                size="mini"
                type="primary"
                class="round-right"
                native-type="button"
                @click="shearchBtn"
                >搜索</el-button
              >
              <el-button size="mini" round @click="resetBtn">重置</el-button>
            </el-form>
          </el-col>
        </el-row>
      </div>

      <div class="tableMaxBox">
        <template>
          <!-- 表格部分 -->
          <el-table :data="demandList" stripe>
            <el-table-column prop="id" label="序号" width="60" align="center">
              <template slot-scope="{ row, $index }">
                <span>{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sn" label="记录编号" width="120">
              <template slot-scope="{ row, $index }">
                <span>{{ row.sn }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="transaction_id"
              label="支付订单号"
              width="260"
            >
              <template slot-scope="{ row, $index }">
                <span>{{ row.transaction_id }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="shop_name" label="店铺名称" width="200">
              <template slot-scope="{ row, $index }">
                <span>{{ row.shop_name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="agent_name"
              label="代理商"
              width="110"
            ></el-table-column
            ><el-table-column
              prop="city_name"
              label="城市"
              width="110"
            ></el-table-column>
            <el-table-column prop="area_name" label="商圈" width="200">
              <template slot-scope="{ row, $index }">
                <span>{{ row.area_name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="pay_amount" label="支付金额" width="100">
              <template slot-scope="{ row, $index }">
                <span>{{ row.pay_amount | filterNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bill_count" label="结算单数量">
              <template slot-scope="{ row, $index }">
                <span
                  class="u text-primary pointer"
                  style="font-weight: bold"
                  @click="goToList(row)"
                  >{{ row.bill_count }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="payment_status" label="支付状态" width="120">
              <template slot-scope="{ row, $index }">
                <span class="text-primary" v-if="row.payment_status == 1"
                  >待支付</span
                >
                <span class="text-info" v-if="row.payment_status == 2"
                  >支付中</span
                >
                <span class="text-success" v-if="row.payment_status == 3"
                  >支付成功</span
                >
                <span class="text-danger" v-if="row.payment_status == 4"
                  >支付失败</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="payer"
              label="操作人"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="add_time"
              label="创建时间"
              width="150"
            ></el-table-column>
            <el-table-column label="操作" width="120px" fixed="right">
              <template slot-scope="{ row, $index }">
                <el-link
                  type="info"
                  class="InfoFont text-danger"
                  :underline="false"
                  @click="goToList(row)"
                  >查看</el-link
                >
                <el-link
                  type="info"
                  class="InfoFont text-primary"
                  :underline="false"
                  @click="downloadOrdermini(row)"
                  >导出明细</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <page
            :total="total"
            :pageNums="pageNum"
            :disableMountedFetch="true"
            @pagedata="onChildValue"
          ></page>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { publicData } from '../../../assets/js/data.js'
import { fetchAreaList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
export default {
  name: 'ShopList',
  data() {
    return {
      windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
      screenHeight: document.documentElement.clientHeight,
      manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
      url: common.url,
      head_url: common.head_url,
      //搜索对应值
      s_jlbh: '', //记录编号
      s_zfddh: '', //支付订单号
      shop_id: '', //店铺id
      shop_name: '', //店铺名
      s_agent_id: '', //代理商id
      // resetAgent: false,
      s_pay_status: '', //支付状态
      ruleForm: {
        date1: '', //开始时间
        date2: '' //结束时间
      },

      demandList: [], //店铺列表
      diaTitle: '', //弹框title
      //向分页组件传值
      total: 0,
      pageNum: 1,
      pageSizeNow: 20,
      // 审核状态
      text: '',
      areaList: [], //区域列表
      shopList: [], //店铺列表

      cityList: [], //城市列表
      city_arr: '',
      city_id: '',
      city_name: '',
      city_val: '',
      areaList: [], //区域列表
      s_area_arr: '', //商圈信息
      s_area_id: '',
      s_area_name: '',
      areaStatus: true,
      agent_reset: 0
    }
  },
  created() {
    //时间的默认选中
    this.ruleForm.date1 = this.date(0) + ' 00:00:00'
    this.ruleForm.date2 = this.date(0) + ' 23:59:00'

    this.selectedAreasMap = {}
  },
  computed: {
    city_value() {
      return this.city_val
    }
  },
  watch: {
    //商圈改变
    areaList(newValue, oldValue) {
      this.listShop()
    },
    // 城市改变
    city_value(newVal, oldVal) {
      if (oldVal) {
        let [id, name] = oldVal.split('|')
        if (id === '北京') {
          id = 1
        }
        // 存储旧的商圈数据
        this.selectedAreasMap[`city-${id}`] = this.s_area_arr
      }
      console.log('存储值', this.selectedAreasMap)
      if (newVal && this.city_id) {
        this.fetchAreaList(this.city_id) //商圈列表
        this.listUser(this.city_id) //店铺列表
      }
    }
  },
  mounted() { },
  methods: {
    date(e) {
      return this.$moment().add('days', e).format('YYYY-MM-DD')
    },
    listUser(city_id) {
      //获取商铺列表
      let fn = new FormData()
      fn.append('sign_status', 30) //已合作的店铺
      fn.append('status', 1) //启用的店铺
      fn.append('city_id', city_id)
      // fn.append("search_list", 1); //不进行分页
      this.$http.post(this.url + '/shop/getListForSearch', fn).then(
        res => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            if (res.data.data != null) {
              res.data.data.list.forEach(item => {
                item.value = item.name
              })
              this.shopList = res.data.data.list
            } else {
              this.shopList = []
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    listShop() {
      let s_departmentIds_Arr = new Array()
      this.s_area_arr.forEach(element => {
        let [id, name] = element.split('|') // es6 数组解构赋值
        s_departmentIds_Arr.push(id.toString())
      })

      //获取支付记录列表
      let fn = new FormData()
      fn.append('pageSize', this.pageSizeNow) //每页多少条
      fn.append('page', this.pageNum) //页数
      fn.append('sn', this.s_jlbh)
      fn.append('agent_id', this.s_agent_id)
      fn.append('transaction_id', this.s_zfddh)
      fn.append('shop_name', this.shop_name)
      // fn.append('area_id', this.area_id)
      fn.append('city_id', this.city_id)
      fn.append('area_id', '' + s_departmentIds_Arr)
      fn.append('payment_status', this.s_pay_status)
      if (this.ruleForm.date1 == null) {
        this.ruleForm.date1 = ''
      }
      fn.append('start_time', this.ruleForm.date1)
      if (this.ruleForm.date2 == null) {
        this.ruleForm.date2 = ''
      }
      fn.append('end_time', this.ruleForm.date2)

      this.$http.post(this.url + '/pay/payList', fn).then(
        res => {
          if (res.data.msg == '查询成功！' || res.data.code == '200') {
            if (res.data.data != null) {
              this.demandList = res.data.data.list
              this.total = res.data.data.count
            } else {
              this.demandList = []
              this.total = 0
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },

    shearchBtn() {
      // 搜索
      //判断时间框是否存在值
      if (this.ruleForm.date1 == null || this.ruleForm.date1 == '') {
        this.$message.error('请选择创建开始时间！')
        return
      }
      if (this.ruleForm.date2 == null || this.ruleForm.date2 == '') {
        this.$message.error('请选择创建结束时间！')
        return
      }
      this.pageNum = 1
      this.listShop()
    },

    async resetBtn() {
      //重置
      await this.resetData() //重置请求数据
      this.pageNum = 1
      // this.listShop()
    },

    resetData() {
      //重置请求数据
      this.s_jlbh = ''
      this.s_zfddh = ''
      this.shop_id = '' //店铺id
      this.shop_name = '' //店铺名
      this.s_pay_status = ''
      this.ruleForm.date1 = this.date(0) + ' 00:00:00'
      this.ruleForm.date2 = this.date(0) + ' 23:59:00'
      //重置代理商-联动数据
      this.agent_reset += 1
    },

    //店铺的自动完成
    querySearch(queryString, cb) {
      var restaurants = this.shopList
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      console.log(item)
      this.shop_id = item.id
    },
    //分页组件->子组件传值
    onChildValue(item) {
      this.pageNum = item[0]
      this.pageSizeNow = item[1]
      this.listShop()
    },
    //导出
    downloadOrder() {
      let s_departmentIds_Arr = new Array()
      this.s_area_arr.forEach(element => {
        let [id, name] = element.split('|') // es6 数组解构赋值
        s_departmentIds_Arr.push(id.toString())
      })

      let obj = {
        export: 1,
        token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
        sn: this.s_jlbh,
        agent_id: this.s_agent_id,
        transaction_id: this.s_zfddh,
        shop_name: this.shop_name,
        city_id: this.city_id,
        area_id: '' + s_departmentIds_Arr,
        payment_status: this.s_pay_status,
        start_time: this.ruleForm.date1,
        end_time: this.ruleForm.date2
      }
      let param = $.param(obj)
      window.location.href = this.url + '/pay/payList?' + param
    },
    //跳转商户结算单列表
    goToList(row) {
      const { href } = this.$router.resolve({ path: '/billShopList', query: { sn: row.bill_sn } })
      window.open(href, '_blank')
    },
    //店铺应收结算单明细-导出
    downloadOrdermini(row) {
      let obj = {
        token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
        sn: row.bill_sn
      }
      let param = $.param(obj)
      window.location.href = this.url + '/billShop/exportBillList?' + param
    },
    // 监听城市val变化
    changeCity() {
      let [id, name, city_sn] = this.city_val.split('|') // es6 数组解构赋值
      this.city_id = id
      this.city_name = name
      this.city_sn = city_sn
    },

    //全选-取消全选商圈
    selectAllArea() {
      let arr = []
      this.areaList.forEach(item => {
        arr.push(`${item.id}|${item.area_name}`)
      })
      if (this.areaStatus == true) {
        this.s_area_arr = arr
      } else {
        this.s_area_arr = []
      }
      this.areaStatus = !this.areaStatus
      // this.shearchBtn()
    },
    //获取商圈列表
    fetchAreaList(city_id) {
      this.s_area_arr = []
      let fn = new FormData()
      fn.append('city_id', city_id)
      fn.append('agent_id', this.s_agent_id)
      this.$http.post(this.url + '/area/list', fn).then(
        res => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            if (res.data.data != null) {
              res.data.data.list.forEach(item => {
                item.value = item.area_name
              })
              this.areaList = res.data.data.list
              // if (this.s_area_arr == '' || this.s_area_arr == null) {
              // 	// 默认选中非254-平谷的
              // 	this.areaList.forEach(element => {
              // 		// 平谷
              // 		if (element.area_name != '平谷') {
              // 			var pusharr = element.id + '|' + element.area_name
              // 			this.s_area_arr.push(pusharr)
              // 		}
              // 	})
              // }
              if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
                this.s_area_arr = this.selectedAreasMap[`city-${city_id}`]
              }
            } else {
              this.areaList = []
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    setValue(arrVal) {
      this.s_agent_id = arrVal.agent_id
      this.cityList = arrVal.city_list
      this.city_val = +this.cityList[0].id + '|' + this.cityList[0].name
      this.city_id = this.cityList[0].id
      this.city_name = this.cityList[0].name
      this.fetchAreaList(this.city_id) //商圈列表
    }
  }
}
</script>

<style scoped>
.auditCentent .labels {
  min-height: 100px;
}
.auditCentent .labels .labels_label {
  float: left;
  cursor: pointer;
}
.check_label {
  background: var(--purple4);
  color: #fff;
  border: none;
}
.pdf {
  width: 860px;
  height: 600px;
}
.main_user {
  background: var(--zfy-red);
  color: #fff;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
}
</style>



// WEBPACK FOOTER //
// src/components/billshop/Payment.vue